<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

	<!-- Basic Page Needs
  ================================================== -->
	<meta charset="utf-8">
	<title>EVOLVE</title>
	<meta name="description" content="">
	<meta name="author" content="">

	<!-- Mobile Specific Metas
  ================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<!-- CSS
  ================================================== -->
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/settings.css" media="screen"/>
	
	<link rel="stylesheet" type="text/css" href="css/hw-parallax.min.css">

    <!-- JS
  ================================================== -->
    <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script> <!-- jQuery -->
	<script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <!-- jQuery easing -->
	<script src="js/modernizr.custom.js" type="text/javascript"></script> <!-- Modernizr -->
    <script src="js/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script> <!-- tabs, toggles, accordion -->
    <script src="js/custom.js" type="text/javascript"></script> <!-- jQuery initialization -->

    <!-- Responsive Menu -->
    <script src="js/jquery.meanmenu.js"></script> 
    <script>
    jQuery(document).ready(function () {
    jQuery('header nav').meanmenu();
    });
    </script>
	
	<!-- Revolution Slider -->
	<script src="js/jquery.themepunch.plugins.min.js"></script>
	<script src="js/jquery.themepunch.revolution.min.js"></script>
	<script src="js/revolution-slider-options.js"></script>
	
	<!-- Prety photo -->
	<script src="js/jquery.prettyPhoto.js"></script>
	<script>
		$(document).ready(function(){
			$("a[data-gal^='prettyPhoto']").prettyPhoto();
		});
	</script>

	<!-- Tooltip -->
    <script src="js/tooltip.js"></script>

	<!-- Favicons
	================================================== -->
	<link rel="shortcut icon" href="images/favicon.ico">
	<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
	<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">

</head>
<body>



	<!-- Primary Page Layout
	================================================== -->
	
<header class="header">
<div class="container">
<div class="logos columns">
<h1 class="logo"><a href="index.html"><img src="images/logo.png" alt="EVOLVE" /></a></h1>
</div><!-- logo -->

<div class="twelve columns">
<nav class="main_menu">

<ul>
<li class="current_page_item">
<a href="index.html">
Home
<div class="sub">
Get Started
</div>
</a>
<ul>
<li><a href="index.html">Home Version 1</a></li>
<li><a href="index-2.html">Home Version 2</a></li>
<li><a href="index-3.html">Home Version 3</a></li>
<li><a href="index-4.html">Home Version 4</a></li>
<li><a href="index-5.html">Home Version 5</a></li>
<li><a href="index-6.html">Home Version 6</a></li><li><a href="http://www.weidea.net">More</a></li>
</ul>
</li>

<li>
<a href="about-us.html">
Pages
<div class="sub">
Page Formats
</div>
</a>
<ul>
<li><a href="about-us.html">About Us</a></li>
<li><a href="about-us-2.html">About Us 2</a></li>
<li><a href="about-me.html">About Me</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="services-2.html">Services 2</a></li>
<li><a href="meet-the-team.html">Meet The Team</a></li>
<li><a href="meet-the-team-2.html">Meet The Team 2</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="full-width-page.html">Full Width Page</a></li>
<li><a href="page-right-sidebar.html">Right Sidebar</a></li>
<li><a href="page-left-sidebar.html">Left Sidebar</a></li>
<li><a href="404-error-page.html">404 Error Page</a></li>
</ul>
</li>

<li>
<a href="#">
Shortcodes
<div class="sub">
Useful Shortcodes
</div>
</a>
<ul>
<li><a href="tabs.html">Tabs</a></li>
<li><a href="buttons.html">Buttons</a></li>
<li><a href="dropcaps.html">Dropcaps</a></li>
<li><a href="accordion-toggles.html">Accordion & Toggles</a></li>
<li><a href="grid-columns.html">Grid Columns</a></li>
<li><a href="images.html">Images</a></li>
<li><a href="video.html">Video</a></li>
</ul>
</li>

<li>
<a href="portfolio-2-columns.html">
Portfolio
<div class="sub">
Awesome Stuff
</div>
</a>
<ul>
<li><a href="portfolio-1-column.html">1 Column</a></li>
<li><a href="portfolio-2-columns.html">2 Columns</a></li>
<li><a href="portfolio-3-columns.html">3 Columns</a></li>
<li><a href="portfolio-4-columns.html">4 Columns</a></li>
<li><a href="single-project-half.html">Single Project Half</a></li>
<li><a href="single-project-wide.html">Single Project Wide</a></li>
</ul>
</li>

<li>
<a href="blog-large.html">
The Blog
<div class="sub">
News & Events
</div>
</a>
<ul>
<li><a href="blog-large.html">Large Image</a></li>
<li><a href="blog-medium.html">Medium Image</a></li>
<li><a href="blog-post.html">Single Post</a></li>
</ul>
</li>

<li>
<a href="contact.html">
Contact US
<div class="sub">
Write Message
</div>
</a>
</li>
</ul>

</nav><!-- navigation -->
</div>
<div class="clearfix"></div>
</div>
</header><!-- header -->

	<!-- REVOLUTION SLIDER
	============================================= -->
	<div class="fullwidthbanner-container top-shadow">
		<div class="fullwidthbanner">
			<ul>
				<!-- Slide 1 -->
				<li data-transition="boxfade" data-slotamount="2" data-masterspeed="300">
				<!-- Main Image -->
				<img src="images/slider/Slider-1.jpg" alt="">
				<!-- End Main Image -->
				</li>
				<!-- End Slide 1 -->
				<!-- Slide 2 -->
				<li data-transition="boxfade" data-slotamount="3" data-masterspeed="300">
				<!-- Main Image -->
				<img src="images/slider/Slider-2.jpg" alt="">
				<!-- End Main Image -->
				</li>
				<!-- End Slide 2 -->
				<!-- Slide 3 -->
				<li data-transition="boxfade" data-slotamount="4" data-masterspeed="300">
				<!-- Main Image -->
				<img src="images/slider/Slider-3.jpg" alt="">
				<!-- End Main Image -->
				</li>
				<!-- End Slide 3 -->
				<!-- Slide 4 -->
				<li data-transition="boxfade" data-slotamount="5" data-masterspeed="300">
				<!-- Main Image -->
				<img src="images/slider/Slider-4.jpg" alt="">
				<!-- End Main Image -->
				</li>
				<!-- End Slide 4-->
			</ul>
		</div>
	</div>
	<!-- END REVOLUTION SLIDER
	============================================= -->

  <div class="wrapper">
    <div class="container">
					<div class="one-third column">
					<!-- Icon Box -->
					<div class="icon-box medium">
						<i class="fa fa-html5 medium colored"></i>
						<h4><a href="#" class="dark-link">Duis Autem Vel Eum</a></h4>
						<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim.</p>
					</div>
					<!-- End Icon Box -->
				</div>
				<div class="one-third column">
					<!-- Icon Box -->
					<div class="icon-box medium">
						<i class="fa fa-css3 medium colored"></i>
						<h4><a href="#" class="dark-link">Qui Blandit Praesent</a></h4>
						<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim.</p>
					</div>
					<!-- End Icon Box -->
				</div>
				<div class="one-third column">
					<!-- Icon Box -->
					<div class="icon-box medium">
						<i class="fa fa-magic medium colored"></i>
						<h4><a href="#" class="dark-link">Tation Dipiscing Elit</a></h4>
						<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim.</p>
					</div>
					<!-- End Icon Box -->
				</div>	
	</div>

  </div>

  
  <div class="wrapper">
    <div class="container">

      <div class="eight columns">
        <img style="margin-top:10px;" src="images/responsive.png" alt="responsive" />
      </div>

      <div class="eight columns">
        <h3 style="margin-top:20px;">Find More about our Features</h3>
        <p>
        Nam tortor ligula, adipiscing non pretium sed, scelerisque eget est. Etiam nec lla rutrum, venenatis libero non, aliquam orci. Phasellus tristique nunc at plat mollis. Etiam sollicitudin facilisis condimentum.
        </p>
					<ul class="list iconok circle">
						<li>Asunt in anim uis aute irure dolor in reprehenderit</li>
						<li>Excepteur sint occaecat cupidatat non proident, sunt in anim</li>
						<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
					</ul>
		<a class="btn big colored" href="#"><i class="fa fa-hand-o-right"></i>Button Text</a>
      </div>


    </div>
  </div>	
  
 
  <div class="wrapper" style="padding-bottom:0!important;">
    <div class="container">

      <div class="sixteen columns">
        <h3 style="margin-top:; text-align:center;">Check our Portfolio to know more about our works</h3>
		<p style="text-align:center;">
        Cras et leo mi, nec fermentum eros. Nullam molestie ultricies tellus id viverra. Quisque porttitor dapibus nulla a consequat. Donec vitae mauris.
		</p>
	  </div>
	  
	  <div class="separator"></div>
	  
				<div class="one-third column photography webdesign">
					<div class="work">
						<a href="images/portfolio/couple-big.jpg" data-gal="prettyPhoto" class="work-image">
							<img src="images/portfolio/couple.jpg" alt="">
							<div class="link-overlay fa fa-search"></div>
						</a>
						<a href="#" class="work-name">Couple</a>
						<div class="tags">
							 Photography, Webdesign
						</div>
					</div>
				</div>
				<div class="one-third column identity">
					<div class="work">
						<a href="../../vimeo.com/67500403" data-gal="prettyPhoto" class="work-image">
							<img src="images/portfolio/beach.jpg" alt="">
							<div class="link-overlay fa fa-play"></div>
						</a>
						<a href="#" class="work-name">Beach</a>
						<div class="tags">
							 Identity
						</div>
					</div>
				</div>
				<div class="one-third column identity">
					<div class="work">
						<a href="images/portfolio/surfing-big.jpg" data-gal="prettyPhoto" class="work-image">
							<img src="images/portfolio/surfing.jpg" alt="">
							<div class="link-overlay fa fa-search"></div>
						</a>
						<a href="#" class="work-name">Surfer</a>
						<div class="tags">
							 Identity
						</div>
					</div>
				</div>	  


    </div>
  </div> 
  
  
  <div class="wrapper">
    <div class="container">
	
      <div class="sixteen columns">
        <h3 style="margin-top:; text-align:center;">Our Clients</h3>
		<p style="text-align:center;">
        Quisque porttitor dapibus nulla a consequat. Donec vitae mauris.
		</p>
	  </div>

  <div class="separator"></div>	  
	  
<!-- Our Clients
================================================== -->
	<div class="sixteen columns clients">

		<!-- Start brand carousel -->
			<ul id="flexiselDemo2">
            <li><img src="images/client1.png" alt="" /></li>
            <li><img src="images/client2.png" alt="" /></li>
            <li><img src="images/client3.png" alt= "" /></li>
            <li><img src="images/client4.png" alt= "" /></li>
            <li><img src="images/client5.png" alt= "" /></li>
            </ul>
            <div class="clearout"></div>
		<!-- End brand carousel -->
	    </div>	

  <div class="separator"></div>

	<!-- begin promobox -->
	<div class="sixteen columns">
	    <div class="promo-box clearfix">
	        <div class="text">
	        <h3>Suspendisse Cursus Diam Quis Tortor Posuere Vehicula.</h3>
	        <p>Lorem ipsum dolor sit amet, cons adipiscing elit. Aenean commodo ligula eget dolor.</p>
	        </div>
	        <a class="btn big colored" href="#"><i class="fa fa-hand-o-right"></i>Button Text</a>
	    </div>	
	</div>	
    <!-- end promobox -->

    </div>
  </div> 
  
  <!-- start footer -->
	<footer class="footer">
    <div class="container">
	<div class="footer-top clearfix">
	<div class="four columns">
	<h3>About Us</h3>
	<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
    <p>Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui.</p>
	</div>
	<div class="four columns">
						<h3>Latest Tweets</h3>
						<div class="twitter">
							<ul>
								<!-- Twitter Message 1 -->
								<li>
									<span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem <a href="#" class="link">http://twitter.com</a></span>
									<span class="twit-date">Jan 7, 2013</span>
								</li>
								<!-- Twitter Message 2 -->
								<li>
									<span>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aliquid :) <a href="#" class="link">http://twitter.com</a></span>
									<span class="twit-date">Jan 7, 2013</span>
								</li>
							</ul>
						</div>
</div>
<div class="four columns">
<h3>Flickr Stream</h3>
						<div class="latest-project">
							<div class="latest-project-item">
								<a href="#"><img src="images/elements/rp-1.jpg" alt=""></a>
							</div>
							<div class="latest-project-item">
								<a href="#"><img src="images/elements/rp-2.jpg" alt=""></a>
							</div>
							<div class="latest-project-item">
								<a href="#"><img src="images/elements/rp-3.jpg" alt=""></a>
							</div>
							<div class="latest-project-item">
								<a href="#"><img src="images/elements/rp-4.jpg" alt=""></a>
							</div>
							<div class="latest-project-item">
								<a href="#"><img src="images/elements/rp-5.jpg" alt=""></a>
							</div>
							<div class="latest-project-item">
								<a href="#"><img src="images/elements/rp-6.jpg" alt=""></a>
							</div>
						</div>
</div>
<div class="four columns">
						<h3>Contact Information</h3>
						<ul class="list contact" style="margin-bottom: 15px;">
							<li class="contact-address"><i class="fa fa-map-marker"></i><span>103088. Ut wisi enim ad minim veniam, quis nostrud.</span></li>
							<li class="contact-mail"><i class="fa fa-envelope"></i><a class="link" href="#">mail@mail.com</a></li>
							<li class="contact-phone"><i class="fa fa-phone"></i><span>+1 (229) 991-22-11</span></li>
							<li class="contact-address"><i class="fa fa-clock-o"></i><span>Monday-Friday: 9:<sup>00</sup> - 18:<sup>00</sup><br>
							Saturday: 10:<sup>00</sup> - 17:<sup>00</sup><br>
							Sunday: closed</span>
							</li>
						</ul>
		
<div class="tooltips">			
			<ul class="social-icons-footer">
				<li><a href="#" data-rel="tooltip" title="Twitter"><i class="fa fa-twitter"></i></a></li>
				<li><a href="#" data-rel="tooltip" title="Facebook"><i class="fa fa-facebook"></i></a></li>
				<li><a href="#" data-rel="tooltip" title="Google+"><i class="fa fa-google-plus"></i></a></li>
				<li><a href="#" data-rel="tooltip" title="Pinterest"><i class="fa fa-pinterest"></i></a></li>
				<li><a href="#" data-rel="tooltip" title="LinkedIn"><i class="fa fa-linkedin"></i></a></li>
				<li><a href="#" data-rel="tooltip" title="Dribbble"><i class="fa fa-dribbble"></i></a></li>
				<li><a href="#" data-rel="tooltip" title="RSS"><i class="fa fa-rss"></i></a></li>
			</ul>
</div>

</div>
	</div><!-- footer-top -->
	</div>

	<div class="container">
	<div class="footer-bottom clearfix">
	<div class="eight columns">
	<p>Copyright &copy; 2014 <a href="#">alphawd</a>. More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>.</p>
	</div>
	<div class="eight columns">
	<nav class="footer-nav">
<ul>
<li>
<a class="first" href="index.html">Home</a>
/
</li>
<li>
<a href="#">Shortcodes</a>
/
</li>
<li>
<a href="portfolio-2-columns.html">Portfolio</a>
/
</li>
<li>
<a href="blog-large.html">Blog</a>
/
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
</div><!-- footer-bottom -->
</div>
	
</footer><!-- footer -->

<script src="js/hw-parallax.min.js"></script>
<script>
  $('.parallax').parallax({
    scroll_factor: 0.5
  });
</script>

<!-- Flexisel -->
<script type="text/javascript" src="js/jquery.flexisel.js"></script>
<script type="text/javascript">

$(window).load(function() {
	$("#flexiselDemo2").flexisel({
		visibleItems: 5,
		animationSpeed: 1000,
		autoPlay: false,
		autoPlaySpeed: 3000,    		
		pauseOnHover: true,
		enableResponsiveBreakpoints: true,
    	responsiveBreakpoints: { 
    		portrait: { 
    			changePoint:480,
    			visibleItems: 1
    		}, 
    		landscape: { 
    			changePoint:640,
    			visibleItems: 2
    		},
    		tablet: { 
    			changePoint:768,
    			visibleItems: 3
    		}
    	}
    });
    
});
</script>
<!-- End Document
================================================== -->
</body>
</html>